<template>
<div class="screen-container">
  <div class="left-text-box">
    <h3>GET A QUOTE</h3>
    <h4>Request A Free Quote!</h4>
    <p>Tempor erat elitr rebum at clita. Diam dolor diam ipsum sit. Aliqu diam amet diam et eos. Clita erat ipsum et lorem et sit, sed stet lorem sit clita duo justo magna dolore erat amet</p>
    <div class="tel-box">
      <div class="tel-icon"><ep-Headset /></div>
      <div class="tel-text">
        <h5>Call for any query!</h5>
        <p>+012 345 6789</p>
      </div>
    </div>
  </div>
  <div class="right-form-box">
    <form action="">
      <div>
        <input type="text" placeholder="Your Name">
        <input type="text" placeholder="Your Email">
      </div>
      <div>
        <input type="text" placeholder="Your Mobile">
        <select value="1">
          <option value="1">Select A Freight</option>
        </select>
      </div>
      <div>
        <textarea type="text" placeholder="Special Note" />
      </div>
      <div class="btn-submit">Submit</div>
    </form>
  </div>
</div>
</template>

<script></script>

<style lang="scss" scoped>
$base-color: #ff3e41;
.screen-container {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;

  .left-text-box {
    position: relative;
    width: 37%;
    padding-left: 34px;
    text-align: left;

    h3 {
      font-size: 18px;
      color: #51CFED;
    }

    h4 {
      padding-top: 12px;
      font-size: 42px;
      line-height: 45px;
      padding-bottom: 57px;
    }

    p {
      font-size: 18px;
      color: gray;
    }

    .tel-box {
      padding-top: 36px; 
      display: flex;

      .tel-icon {
        background-color: $base-color;
        color: white;
        text-align: center;
        padding-top: 12px;
        box-sizing: border-box;
        width: 42px;
        height: 42px;

        svg {
          width: 24px;
          height: 24px;
        }
      }

      .tel-text {
        padding-left: 17px;

        p {
          margin-top: 8px;
          color: $base-color;
        }
      }
    }
  }

  .right-form-box {
    width: 53%;
    height: 290px;

    form {
      width: 85%;
      height: 100%;
      margin-left: auto;
      margin-right: 0;
      background-color: #F8F2F0;
      padding: 36px 0;

      input, select, textarea {
        margin: 0 6px;
        margin-top: 16px;
        width: 250px;
        display: inline-block;
        outline: none;
        border: none;
        background-color: #ffffff;
        line-height: 48px;
        height: 48px;
        box-sizing: border-box;
        padding-left: 12px;
      }

      textarea {
        width: 515px;
        height: 56px;
        resize: none;
      }

      .btn-submit {
        width: 515px;
        height: 56px;
        margin: 0 auto;
        margin-top: 16px;
        font-size: 18px;
        font-weight: bold;
        color: white;
        padding-top: 16px;
        box-sizing: border-box;
        background-color: $base-color;
      }

    }
  }
}
</style>
